import { Link } from 'react-router-dom';
import { Avatar, Button, Image, Space } from 'antd';
import type { SelectProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { BankOutlined } from '@ant-design/icons';
import companyImageData from '../../data/companyImageData';
import { getOptionLabel } from '../../data/statusData';

const columns = (booleanOptions: SelectProps['options'], onRowNumberClick: (record: any) => void) => {
  const columns: ColumnsType<any> = [
    {
      title: '#',
      dataIndex: 'id',
      key: '__row_number',
      align: 'right',
      width: 48,
      render: (text, record, index) => {
        return (
          <Button
            type="link"
            style={{ padding: 0 }}
            onClick={() => onRowNumberClick(record)}
          >
            <em>{index + 1}</em>
          </Button>
        );
      }
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record, index) => {
        return (
          <Space size={5}>
              {
                record.logo ?
                  <Avatar
                    draggable={false}
                    shape="square"
                    src={
                      <Image
                        src={record.logo.startsWith('/') ? record.logo : ('/' + record.logo)}
                        fallback={companyImageData}
                        preview={false}
                      />
                    }
                    style={{ backgroundColor: '#ffffff' }}
                  /> :
                  <Avatar
                    draggable={false}
                    shape="square"
                    icon={<BankOutlined style={{ color: '#707070', fontSize: 24 }} />}
                    style={{ backgroundColor: '#ffffff' }}
                  />
              }
              {text}
          </Space>
        );
      }
    },
    {
      title: '城市',
      dataIndex: 'cityId',
      key: 'cidtyId',
      render: (text, record, index) => {
        return record.provinceName && record.provinceName ? `${record.provinceName} / ${record.cityName}` : (record.cityName || '');
      }
    },
    {
      title: '可用',
      dataIndex: 'active',
      key: 'active',
      align: 'center',
      render: (text, record, index) => {
        return getOptionLabel(booleanOptions, typeof(text) === 'boolean' ? text.toString() : '');
      }
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address'
    },
    {
      title: '官网',
      dataIndex: 'website',
      key: 'website',
      render: (text, record, index) => {
        return (
          text ? (
            <Link to={text} target="_blank">
              <Button
                type="link"
                style={{ padding: 0 }}
              >
                {text}
              </Button>
            </Link>
          ) : null
        );
      }
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email'
    },
    {
      title: '电话',
      dataIndex: 'telephone',
      key: 'telephone'
    },
    {
      title: '创建用户',
      dataIndex: 'createdBy',
      key: 'createdBy'
    }
  ];
  return columns;
};

export default columns;
